<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>2.详聊v-for</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <!-- v-for遍历数组 -->
      <div v-for="(item,index) in arr">{{item}} - {{index}}</div>
      <hr>

      <!-- v-for遍历对象 -->
      <div v-for="(value,key,index) in obj">{{value}} - {{key}} - {{index}}</div>
      <hr>

      <!-- for遍历字符串 -->
      <div v-for="(char,index) in str">{{char}} - {{index}}</div>
      <hr>

      <!-- for遍历指定次数 -->
      <div v-for="(number,index) in n">{{number}} - {{index}} </div>
      <hr>

      <!-- v-for很健壮，如下写法均不会报错 -->
      <h1 v-for="a in true">你好</h1>
      <h1 v-for="a in null">你好</h1>
      <h1 v-for="a in undefined">你好</h1>
      <h1 v-for="a in ''">你好</h1>
      <h1 v-for="a in []">你好</h1>

      <!-- NaN v-for无法处理 -->
      <!-- <h1 v-for="a in NaN">你好</h1> -->

    </div>

    <script type="text/javascript">
      new Vue({
        el:'#demo',
        data:{
          arr:['Java','前端','大数据','嵌入式'],
          obj:{x:100,y:200},
          str:'你好啊！',
          n:17,
          // isHot:true,
          // nu:null,
          // un:undefined
        }
      })
    </script>
  </body>
</html>